import {createApp} from 'vue'
import App from './App.vue'

//导入路由
import router from './router/index'

//全局导入Element plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { ElMessage } from 'element-plus'

// 导入 Axios
import axios from 'axios'
import VueAxios from 'vue-axios'

// 导入权限指令
import { setupPermissionDirective } from './utils/permission'

// API 基础配置
axios.defaults.baseURL = '/' // 修改为使用相对路径，通过Vite代理访问
axios.defaults.headers.common['Content-Type'] = 'application/json'
axios.defaults.withCredentials = true // 允许跨域请求携带凭证
axios.defaults.timeout = 30000 // 设置超时时间为30秒

// 请求拦截器 - 添加 token
axios.interceptors.request.use(
  config => {
    // 调试日志
    console.log(`Requesting ${config.method.toUpperCase()} ${config.url}`, config);
    
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token
    }
    return config
  },
  error => {
    console.error('请求拦截器错误:', error)
    return Promise.reject(error)
  }
)

// 响应拦截器 - 处理错误
axios.interceptors.response.use(
  response => {
    // 调试日志
    console.log(`Response from ${response.config.url}:`, response);
    return response
  },
  error => {
    console.error('API 错误:', error)
    if (error.response) {
      console.error('错误状态码:', error.response.status)
      console.error('错误数据:', error.response.data)
      
      // 根据错误状态码处理
      switch (error.response.status) {
        case 400:
          console.error('请求参数错误');
          break;
        case 401:
      // 未授权，清除 token 并跳转到登录页面
          console.error('身份验证失败，即将跳转到登录页面');
      localStorage.removeItem('token')
          localStorage.removeItem('user')
          ElMessage.error({
            message: '登录已过期，请重新登录',
            duration: 2000,
            onClose: () => {
      router.push('/login')
            }
          });
          break;
        case 403:
          console.error('权限不足');
          ElMessage.error('权限不足，无法访问该资源');
          break;
        case 404:
          console.error('请求的资源不存在');
          break;
        case 500:
          console.error('服务器内部错误');
          break;
        default:
          console.error('未知错误');
      }
    } else if (error.request) {
      console.error('请求未收到响应');
      ElMessage.error('服务器未响应，请检查网络连接');
    } else {
      console.error('请求配置错误');
      ElMessage.error('请求发送失败');
    }
    return Promise.reject(error)
  }
)

const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.use(VueAxios, axios);

// 注册权限指令
setupPermissionDirective(app);

// 全局错误处理
app.config.errorHandler = (err, vm, info) => {
  console.error('Vue错误:', err);
  console.error('错误信息:', info);
};

// 全局属性
app.config.globalProperties.$http = axios;

app.mount('#app')
